<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const listData = [
        { id: "p1", title: "广东" },
        { id: "p2", title: "四川" },
        { id: "p2-1", pid: "p2", title: "成都" },
        { id: "p1-1", pid: "p1", title: "广州" },
        { id: "p2-2", pid: "p2", title: "德阳" },
        { id: "p2-3", pid: "p2", title: "绵阳" },
        { id: "p2-1-1", pid: "p2-1", title: "高新区" },
      ];

      // 思路，找儿子
      function getChildren(list, id) {
        return list.filter((item) => item.pid === id);
      }

      const arr1 = getChildren(listData, "p1"); // [{ id: "p1-1", pid: "p1", title: "广州" }]

      // [
      //   { id: "p2-1", pid: "p2", title: "成都" },
      //   { id: "p2-2", pid: "p2", title: "德阳" },
      //   { id: "p2-3", pid: "p2", title: "绵阳" },
      // ];
      const arr2 = getChildren(listData, "p2");
      // console.log("arr1", arr1);
      // console.log("arr2", arr2);

      function listToTree(list, id) {
        return list
          .filter((item) => item.pid === id)

          .map((item) => {
            // 使用当前 item.id 作为 pid 来查找属于它子级
            const children = listToTree(list, item.id);
            console.log("当前 城市", item.title, "他的子集是", children);

            // 判断 children 是否查找到
            if (children.length) {
              item.children = children;
            }

            // 返回
            return item;
          });
      }
      // [
      //   {
      //     id: "p2-1",
      //     pid: "p2",
      //     title: "成都",
      //     children: [{ id: "p2-1-1", pid: "p2-1", title: "高新区" }],
      //   },
      //   { id: "p2-2", pid: "p2", title: "德阳" },
      //   { id: "p2-3", pid: "p2", title: "绵阳" },
      // ];
      // const arr3 = listToTree(listData, "p2");
      // console.log("arr3", arr3);

      const arr4 = listToTree(listData);
      console.log("arr4", arr4);
    </script>
  </body>
</html>
